<template>
	<view class="details" v-if="Object.keys(datalist).length > 0">
		<view class="content">
			<view class="header">
				<view class="title">{{datalist.work_type_name}}</view>
				<view class="message">
					<view class="lcoation date">
						<image src="../../../../static/image/job/date.png"></image>
						<text>{{create_date}}</text>
					</view>
				</view>
			</view>
			<view class="baseinfo">
				<view class="subtitle">招工信息</view>
				<view class="baseinfo_details">
					<view><text>1.招工工种：</text><text>{{datalist.work_type_name}}</text></view>
					<view><text>2.招聘人数：</text><text>{{datalist.number}}人</text></view>
					<view>
						<text>3.内容标签：</text>
						<view class="demand" style="max-width: 536rpx;">
							<text v-for="(item,i) in datalist.label" :key="i">{{item}}</text>
						</view>
					</view>
					<view><text>4.结算方式：</text><text>{{datalist.settlement_method}}</text></view>
					<view>
						<text>5.工作地址：</text> 
						<text v-if="datalist.city_name != datalist.state_name" style="max-width: 536rpx;">{{datalist.state_name}}{{datalist.city_name}}</text>
						<text v-else style="max-width: 536rpx;">{{datalist.city_name}}</text>
					</view>
					<view class="requirement">
						<text>6.招工要求：</text>
						<text style="max-width: 536rpx;word-break: break-all;">{{datalist.requirement}}</text>
					</view>
				</view>
			</view>
			<view class="tel">
				<view class="subtitle">联系方式</view>
				<view class="tel_details">
					<view><text>联系人：</text><text>{{datalist.contacts}} </text></view>
				</view>
			</view>
			<view class="company" v-if="datalist.recruitment_type=='企业'">
				<view class="company_details">
					<image v-if="datalist.image_1920==''" src="../../../../static/image/job/company.png"></image>
					<image v-else :src="datalist.image_1920"></image>
					<view class="company_name">{{datalist.company_name}}</view>
					<view class="type">企业招聘</view>
				</view>
				<view class="introduce">
					<view v-if="datalist.business_scope">经营范围：{{datalist.business_scope}}</view>
					<view v-else>经营范围：暂无</view>
				</view>
				<map style="width: 670rpx;height: 385rpx;border-radius: 10rpx;background: #fff;margin-top: 30rpx;"
					:latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale"
					@callouttap="gotomap"></map>
			</view>
		</view>
		<view class="sale">
			<view class="browse">
				已浏览：{{datalist.visit_num}} 已联系：{{datalist.contact_num}}
			</view>
			<view v-if="datalist.in_from_sale">
				<view class="edit" v-if="isshow=='1'">
					<view class="shelf" @click="clickshelf">下架</view>
					<view @click="gotoedit">编辑</view>
				</view>
				<view class="contact" @click="contact" v-if="isshow=='2' && userInfo.uid!=datalist.user_id&&userInfo.account_type!='工程企业'">
					<view>联系对方</view>
				</view>
			</view>
		</view>
		<u-popup v-model="reasonshow" mode="bottom" border-radius="54" closeable="true" @close="close">
			<view class="all">
				<view class="reason">下架原因</view>
				<view class="shelf_reason">
					<u-radio-group v-model="val" @change="radioGroupChange" wrap="true">
						<u-radio 
							@change="radioChange($event)" 
							v-for="(item, index) in list" :key="index" 
							:name="item.name"
							:disabled="item.disabled"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="operation">
					<view class="cancel" @click="cancel">取消</view>
					<view class="determine" @click="determine">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	
	export default {
		data() {
			return {
				reasonshow:false,
				isshow:'',
				latitude: '', //纬度
				longitude: '', //经度
				scale: 18, //缩放级别
				list: [
					{
						name: '已从其他途径招聘',
						disabled: false,
						id:1
					},
					{
						name: '招工信息已失效',
						disabled: false,
						id:2
					},
					{
						name: '没有生成订单，但已完成线下招聘',
						disabled: false,
						id:3
					},
					{
						name: '人员已满，无需再招聘人员',
						disabled: false,
						id:4
					},
					{
						name: '其他原因',
						disabled: false,
						id:5
					}
				],
				reasonindex:'',
				datalist:{},
				userInfo:{},
				recruit_id:'',
				coordinate:{},
				markers: [{
					address: '',
					title: '',
					id: 11,
					latitude: '',
					longitude: '',
					iconPath: "../../../../static/image/job/dw.png",
					width: 22,
					height: 26,
					callout: { //marker气泡
						content: '',
						color: "#000",
						bgColor: "#fff",
						borderRadius: 10,
						fontSize: 14,
						textAlign: "center",
						padding: 10,
						display: 'ALWAYS',
					}
				}],
				create_date:'',
				val:''
			}
		},
		onLoad(e){
			// console.log(e);
			this.isshow = e.isshow
			this.recruit_id = e.id
			// console.log(this.isshow);
		},
		onShow() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getdata()
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
				this.list.forEach(item=>{
					if(item.name==e){
						this.reasonindex = item.id
					}
				})
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			gotoedit(){
				uni.navigateTo({
					url: `/pagesB/mine/recruitment/releaseRecruitment?state=false&&id=${this.recruit_id}&&datalist=`+JSON.stringify(this.datalist)
				})
			},
			clickshelf(){
				this.reasonshow = !this.reasonshow
			},
			close(){
				this.reasonindex = ''
				this.val = ''
			},
			cancel(){
				this.reasonindex = ''
				this.val = ''
				this.reasonshow = false
			},
			determine(){
				if(this.reasonindex==''){
					uni.showToast({
						icon: 'none',
						title: '请选择下架原因'
					})
				}else{
					api.recruitmentShelf('jhj.recruitment.release','_api_recruit_work_off_shelf',this.userInfo.access_token,this.reasonindex,this.recruit_id,'').then(res=>{
						if(res.errcode==0){
							this.reasonshow = !this.reasonshow
							uni.navigateBack()
						}
					})
				}
			},
			gotomap() {
				uni.openLocation({
						latitude: this.latitude / 1,
						longitude: this.longitude / 1,
						name: this.title,
						address: this.address,
				})
				
				// uni.getLocation({
				// 	success(res) {
				// 		uni.openLocation({
				// 			latitude: this.latitude / 1,
				// 			longitude: this.longitude / 1,
				// 			name: this.title,
				// 			address: this.address,
				// 		})
				// 	}
				// });
			},
			getdata(){
				api.recruitmentDetails('jhj.recruitment.release','_api_recruit_detail',this.userInfo.access_token,this.userInfo.uid,this.recruit_id).then(res=>{
					this.datalist = res.data[0]
					this.create_date = res.data[0].create_date.split(' ')[0]
					this.coordinate = res.coordinate
					this.markers[0].address = res.data[0].registered_address
					this.markers[0].title = res.data[0].company_name
					this.markers[0].latitude = res.coordinate.lat
					this.markers[0].longitude = res.coordinate.lng
					this.latitude = res.coordinate.lat
					this.longitude = res.coordinate.lng
					this.markers[0].callout.content = res.data[0].company_name
					uni.setStorageSync('user_id', res.data[0].user_id)
					uni.setStorageSync('datalist', JSON.stringify(res.data[0]))
				})
			},
			contact(){
				uni.setStorageSync('image_1920', JSON.stringify(this.datalist.image_1920))
				var type = '招工订单'
				uni.navigateTo({
					url:`/pages/main/chat/chatroom?type=${type}&&id=${this.datalist.id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.details {
		.content{
			padding: 0 30rpx;
			height: calc(100vh - 230rpx);
			position: relative;
			overflow-y: auto;
			.header {
				// height: 190rpx;
				border-bottom: 2rpx solid #E8E9EE;
				padding: 36rpx 0 24rpx;
			
				.title {
					font-size: 48rpx;
					font-weight: bold;
					color: #333333;
				}
			
				.message {
					display: flex;
					align-items: center;
					margin-top: 24rpx;
			
					.lcoation {
						display: flex;
						align-items: center;
			
						image {
							width: 22rpx;
							height: 26rpx;
						}
			
						text {
							font-size: 26rpx;
							color: #333333;
							margin-left: 6rpx;
						}
					}
			
					.date {
						// margin-left: 60rpx;
			
						image {
							width: 26rpx;
						}
					}
				}
			}
			.subtitle {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 22rpx;
			}
			.baseinfo {
				padding: 46rpx 0 30rpx;
				border-bottom: 2rpx solid #E8E9EE;
			
				.baseinfo_details {
					font-size: 26rpx;
					color: #333333;
			
					>view {
						display: flex;
						// align-items: center;
						line-height: 46rpx;
			
						text {
							// height: 100%;
						}
					}
			
					.demand {
						margin-top: -10rpx;
						text {
							color: #666666;
							padding: 6rpx 14rpx;
							background: #F4F6F8;
							margin-right: 12rpx;
							margin-top: 10rpx;
							display: inline-block;
						}
					}
			
					.requirement {
						align-items: flex-start;
			
						text:last-child {
							flex: 1;
						}
					}
				}
			}
			.tel {
				padding: 46rpx 0 30rpx;
				border-bottom: 2rpx solid #E8E9EE;
			
				.tel_details {
					view {
						line-height: 46rpx;
						color: #333333;
						font-size: 26rpx;
					}
				}
			}
			.company {
				margin-bottom: 20rpx;
				.company_details {
					display: flex;
					align-items: center;
					margin-top: 30rpx;
			
					image {
						width: 50rpx;
						height: 50rpx;
					}
			
					.company_name {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
						margin-left: 10rpx;
					}
			
					.type {
						font-size: 26rpx;
						color: #FFFFFF;
						padding: 2rpx 16rpx;
						background: #5784F1;
						border-radius: 24rpx;
						margin-left: 6rpx;
					}
				}
			
				.introduce {
					margin-top: 20rpx;
					view{
						line-height: 46rpx;
					}
				}
			}
		}
		.sale{
			position: fixed;
			bottom: 0;
			width: 100%;
		}
		.browse {
			width: 100%;
			text-align: right;
			font-size: 26rpx;
			color: #999999;
			// position: fixed;
			// bottom: 155rpx;
			height: 74rpx;
			background: #fff;
			padding: 18rpx 30rpx 0 0;
		}

		.contact {
			width: 100%;
			height: 154rpx;
			padding: 20rpx 30rpx 0;
			border-top: 2rpx solid #E8E9EE;
			
			view{
				height: 94rpx;
				background: linear-gradient(146deg, #FE4D60 5%, #FF7C89 100%);
				border-radius: 4px;
				font-size: 34rpx;
				color: #FFFFFF;
				line-height: 94rpx;
				text-align: center;
			}
		}
		.edit{
			width: 100%;
			height: 154rpx;
			padding: 20rpx 30rpx 0;
			border-top: 2rpx solid #E8E9EE;
			// position: fixed;
			// bottom: 0;
			display: flex;
			justify-content: space-between;
			view{
				width: 325rpx;
				height: 94rpx;
				background: linear-gradient(146deg, #FE4D60 5%, #FF7C89 100%);
				border-radius: 4rpx;
				line-height: 94rpx;
				text-align: center;
				font-size: 34rpx;
				color: #fff;
			}
			.shelf{
				background: #fff;
				border: 2rpx solid #ED4D59;
				color: #333333;
			}
		}
		.all{
			padding: 30rpx 60rpx 40rpx;
			height: 660rpx;
			.reason{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
			}
			.shelf_reason{
				margin-top: 36rpx;
			}
			.operation{
				display: flex;
				justify-content: space-between;
				margin-top: 94rpx;
				view{
					width: 325rpx;
					height: 94rpx;
					border-radius: 4rpx;
					border: 2rpx solid #ED4D59;
					color: #000;
					font-size: 34rpx;
					text-align: center;
					line-height: 94rpx;
				}
				.determine{
					background: linear-gradient(146deg, #FE4D60 5%, #FF7C89 100%);
					border-radius: 4rpx;
					color: #fff;
				}
			}
		}
		.in_from_sale{
			bottom: 0;
		}
	}
	/deep/.u-radio__icon-wrap--checked{
		border-color: #00BA3B!important;
		background-color: #00BA3B!important;
	}
	/deep/.u-radio{
		height: 64rpx!important;
	}
</style>
